*{
box-sizing:border-box;
border-collapse: collapse;
font-size: 18px;
 }
.fa:hover
{
cursor:pointer;
} 
.fa:active
{
 background:#ccc;
} 
 
#box{
   /*background: yellow;*/
   width: 80%;
   min-width:700px;
   margin: 0 auto;
   /*background: red;*/
   position: relative;
}

#showStates
{
  position: fixed;
   display:none;
  width:200px;
  height:50px;
  background:rgb(50,50,50,0.4);
  top:200px;
  z-index:100;
  text-align:center;
  color:#fff;
  line-height:50px;
}
#topBar
{
    height: 40px;
    border:1px solid #ccc;
    border-bottom:none;
    outline: none;
    text-align: center;
    font-size:26px;

}



#topBar div
{
 
 height:100%;
 
}
#topBar a
{
 text-decoration: none;
 font-weight: 1000;
 width:100px;
 display: inline-block;
 color:orange;
 line-height:40px;
 height:40px;
 font-family:"Comic Sans MS", cursive, sans-serif;
  
}
#iconbox{
   background: #eee;
   width: 100%;
   /*height:82px;*/
   border:1px solid #ccc;
   
}

#minMax
{
 //background: #fff;
 height: 100%;
 margin: 0 auto;
}
#showCode
{

}
.edit{
 width:49.8px;
 height:40px;
 text-align:center;
 border:none;
 display:inline-block;
 float:left;
 margin:0;
 padding:0;
 line-height: 40px;
 border-spacing: 0;
 border-collapse: collapse;

 }
.edit:active{
 
 background:#ccc;khui
 
 }

#AColor
{
 
 display:block;
 position: relative;
 /*background: red;*/
 font-size: 16px;
 z-index:auto;
 font-size: 16px;
 color: red;
 font-weight: bold;
}
#AColorIcon{
 width: 100%;
 height: 100%;
 color: red;
 font-weight: bold;
 font-size: 16px;
}


#fColor{
 display: block;
 position: absolute;
 top: 40px;
 left: 0;

 width:50px;
 height:30px;
 /*background: red;*/
 z-index: 1000;
 border: none;
 padding: 0;
 display: none;
 margin: 0;*/


}
#showH{
 position: relative;
 width: 50px;
 height: 40px;
 display:block;
 z-index:auto;
 /*background: blue;*/


}
#HIco{
 width: 50px;
 height:40px;
    
 border: none;
}
#H{
 padding-top:20px;
 position: absolute;
 width:50px ;
 height: 112px;
 top: 40px;
 z-index: 100;
 left: 0;
    background:#eee;
 display: none;
 border:1px solid #ccc;
}
#H button{
 width: 100%;
 height:30px ;
 
 border: none;
 border-top:1px solid #ccc;
}


.fa-brush
{
   transform: rotate(180deg);
}

#fontF
{
 position: relative;
 z-index: 1;
 /*background: blue;*/
 /*border: 1px solid red;*/
}
#showF
{
 position: absolute;
 width: 150px;
 z-index: 100;
 top: 41px;
 background: #eee;
 height: 250px;
    border: 1px solid #ccc;
 overflow: auto;
 display: none;
 padding-top:20px;
 overflow-y: auto;
 font-size: 16px;
 

}
#showF button
{
 font-size: 18px;
 display: inline-block;
 overflow: hidden;
 text-overflow: ellipsis;
 min-height: 36px;
 width: 100%;
 line-height: 26px;
 border: none;
 border-top: 1px dashed #ccc;
}
#fontSize
{ 
  position: relative;
  z-index: 1;
}
#showFontSize{
 padding-top:20px;
  width: 80px;
  height:390px;
 background: #eee;
 position: absolute;
 top: 40px;
 left: 0;
 z-index: 200;
/*display: none;*/
user-select: none;
display: none;
border:1px solid #ccc;
border-bottom:none;
}

#showFontSize #fontSizeNumber
{  
 border:1px solid #ccc;
 width:100%;
 height:20px ;
 text-align: center;
 font-size: 16px;
 user-select: none;
 /*border:none*/
}
#fontFamily{
 
 font-size: 16px;
}


#fontSizeNumber{
 width: 52px;
 height: 20px;
 user-select: none;
 display: inline-block;
 line-height: 20px;
 border: 1px solid #ccc;

}
#showFontSize #addNumber
{ display: block;
 width:39px;
 height: 20px;
 line-height:20px;
 border: 1px solid #ccc;
 font-size: 18px;
 float: left;
 font-weight: normal;
}
#showFontSize #subNumber
{   display: block;
 width: 39px;
 height: 20px;
 line-height: 15px;
 border: 1px solid #ccc;
 float: left;
 /*background:blue;*/
 /*margin:0;*/
}
#showFontSize #fontSizeYes
{
 width:100%;
 height:30px ;
 /*margin-top: 2px;*/
 font-size: 16px;
 user-select: none;
 background:orange;
 border: 1px solid #ccc;

}
#showFontSize #fontSizeYes:hover
{
 cursor: pointer;
 color: blue;
}
#ABackground
{  
 display: inline-block;
 position: relative;
 /*background: red;*/
 font-size: 16px;
 z-index: 1;


}
#ABackgrounIcon
{
  height: 100%;
  width: 100%;
  border: none;
  color: red;
}
#bColor{
 /*display: block;*/
 position: absolute;
 top: 40px;
 left: 0;
 width:50px;
 height:30px;
 z-index: 100;
 border: none;
 padding: 0;
 display: none;
 margin: 0;
}

#tt{
 display: inline-block;
 user-select: none;

 

}
.upButton{
 width:50px ;
 height: 30px;
 border: none;
 line-height: 40px;


}
.upButton:active{
 background:#ccc;

}
.downButton{
 width:50px ;
  height: 10px;
  background:#ddd;
  border: none;
  border-left:1px solid #FFF;

}

.downButton:active{
 background: #ccc;
}
#upload{

}
#showFile{
 position: absolute;
 top:170px;
 /*left: ;*/
 width:50vw;
 min-width:330px ;
 max-width:500px ;
 height: 40vw;
 min-height:264px;
 max-height:400px;
 margin: 0 auto;
 background: orange;
 text-align: center;
 border: 1px solid #ccc;
 border-radius: 5px;
 z-index: 1000;
}
#preview
{  display: flex;
 align-items: center;
 width:100%;
 padding:2%;
 height:90%;
 border-bottom: 1px solid #ccc;
 line-height:;
 justify-content: center; 
 /*background:red;*/
}

.Smedia
{
 
 border:1px solid #ccc;
}

.SmediaBox{
 width:100%;
 height:100%;
 border:1px dashed #ccc;
 background:#ffffff55;
 
 }
.SmediaBox:hover
{
 background: #ffffff35;
}
#uploadButton{
 width: 100%;
 height: 10%;



}
#uploadY,#uploadC,#selectFile{
  margin-top: 1%;
 height: 80%;
 font-size:0.8em;
 /*font-size:12px ;*/
}


#addTable
{ 
  background: red;
  width: 50px;
  height: 40px;
  position: relative;
  z-index: 1;
  display: inline-block;
  /*background: bule;*/
  float: left;
}
#tableB{
 display: inline-block;
 width: 50px;
 height: 40px;

}
#tableSetBox
{
  /*padding-top: 20px;*/
  text-align: center;
  position: absolute;
  width:150px;
  height:410px;
  top: 80px;
  left:0px;
  background: orange;
  z-index: 100;
  border:none;
  display:none;
  /*margin-top: 50px;*/
  border:1px solid #ccc;
}

#tableSetBox span
{
 display: block;
 float: left;
 width:75px;
 border: 1px solid #ccc;
 /*margin-left: 1px;*/
 /*background: yellow;*/
 text-align: center;
}
#tableSetBox #tips
{  
    display: block;
    height: 40px;
    width: 100%;
    font-size:16px;
    cursor: pointer;
    line-height: 30px;
    font-weight: 1000;
}
#tableSetBox .showTipes
{
 width: 100%;
 height:30px;
 background:#fff;
 font-size:0.9em;
 line-height: 2em;
 border:none;
}
#tableSetBox  .insert:hover,.editC:hover,.editR:hover,.editCW:hover,.editRW:hover{
 cursor:pointer;
}

#tableSetBox .showInsert
{
 height:20px;
 line-height:20px;
 font-size: 1em;
}
#tableSetBox .insert
{ 
 /*font-size: 0.8em;*/
 width:74px ;
 height:20px;
 line-height:20px;
 border:1px solid #ccc;
 background:orange;
 font-size: 1em;
}

#tableSetBox #insertTableYes
{
 width:100%;
 height:30px;
 line-height: 16px;
 font-size: 16px;
  background:orange;
 border:1px solid #ccc;
}
#tableSetBox #showTable{
 display:block ;
 width: 120px;
 height: 80px;
 line-height: 80px;
 text-align: center;
 cursor:pointer;

}

#tableSetBox  #setC
{ 
 width:74px;
 text-align: center;
 border:1px solid #ccc;
 outline-style: none;
}
#tableSetBox  #setR
{
 width:74px;
 text-align: center;
 border:1px solid #ccc;
 outline-style: none;
}
#tableSetBox .editC
{
   width: 74px;
 height:30px;
 line-height:15px;
 background:orange;
 border:1px solid #ccc

}
#tableSetBox .editR{
 width:28px;
 height: 40px;
 line-height: 40px;
 float:left;
 background:orange;
 border:1px solid #ccc
}

#tableSetBox  .editCW{
  width:74px ;
 height:30px;
 line-height:15px;
 background:orange;
 border:1px solid #ccc

}
#tableSetBox  #shoW{
   display:block ;
 width: 120px;
 height: 80px;
 line-height: 80px;
 text-align: center;
 cursor:pointer;
}

#tableSetBox  .editRW{
 width:28px;
 height: 40px;
 line-height: 40px;
 float:left;
 background:orange;
 border:1px solid #ccc
}

#state
{
   width: 100%;
   height: 30px;
   background: orange;
   padding:0;
   line-height:20px;
   font-size:16px;
   

   
}
#cls{
 display: block;
 width:200px;
 height: 100%;
   text-align: center;
   margin: 0;
   outline-style: none;
   border:none;
   /*border-left:none;*/
    background: orange;
    font-size:16px;
    color:blue;
    float: left;
}
#stateWorder{
 display: block;
 padding-left: 20px;
 /*padding-top: 20px;*/
 min-width: 50%;
 height:30px;
   text-align:left;
   color:blue;
   line-height: 32px;
    float: left;

   
}



#text{
 padding:10px ;
    width: 100%;
    /*height: 80%;*/
    min-height:600px;
   /* font-weight: bolder*/;
   outline-style: none;
   font-size: 20px;
   border:1px solid #ccc;
   line-height: 2em;
   word-wrap: break-word;
   /*font-family: serif;*/
}
#text p{
  font-size: 20px;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rebeccapurple;
}
/*span只能设置为块元素才能左右对齐等，设置内部块不起作用
这里使用了。但是块元素会到时换行，这里使用了flex布局*/
#text span
{
 /*display: flex;*/
}

